<template>
  <div class="ac-page-wrapper">
    <div class="head-banner">
      <img src="@/assets/images/activity/blackFriday/background.webp" class="bg-img" alt="" />
      <img src="@/assets/images/activity/blackFriday/banner.svg" class="banner-img" alt="">
      <div class="head-time">
        <!-- <img src="@/assets/images/activity/logo.png" class="logo-sty" @click="linkBtn" alt="" /> undone-->
        <div class="right-rect">
          <Dropdown trigger="click" class="other-column nav-dropdown">
            <div class="language">
              <img class="icon" src="@/assets/images/home/top_nav_language.svg" alt="" />
              <div class="type">
                <span>{{ userLanguage.text }}</span>
                <span>/</span>
                <span>{{ userCurrency.code }}</span>
                <Icon type="ios-arrow-down"></Icon>
              </div>
            </div>
            <DropdownMenu class="fq-dropdown-menu lang-dropdown-menu" slot="list">
              <div class="select-list-wrap lang-select">
                <span class="title">
                  {{ $t("header.language") }}
                </span>
                <div class="select-list">
                  <div class="select-list-item" v-for="item in langList" :key="item.text" @click="onUserLang(item)"
                    :class="item.code == userLanguage.code ? 'select-active' : ''
                      ">
                    <span>{{ item.text }}</span>
                  </div>
                </div>
              </div>
              <div class="select-list-wrap rate-select">
                <span class="title">
                  {{ $t("header.legalTender") }}
                </span>
                <div class="select-list">
                  <div class="select-list-item" v-for="item in currencyList" :key="item.text"
                    @click="onUserCurrency(item)" :class="item.code == userCurrency.code ? 'select-active' : ''
                      ">
                    <span> {{ item.code }}</span>
                  </div>
                </div>
              </div>
            </DropdownMenu>
          </Dropdown>
          <!-- 当服务器时间大于开始时间显示 -->
          <div class="time-sty" v-if="nowDate > startTime && activityShow">
            <div class="time-label">{{ $t("event.endsItUntil") }}</div>
            <div class="time-text">
              <span>{{ hours }}</span>:<span>{{ min }}</span>:<span>{{ sec }}</span>
            </div>
          </div>
        </div>
      </div>
      <img src="@/assets/images/activity/blackFriday/logo.webp" class="title-sty" alt="" />
      <img v-if="activityShow && (userLanguage.code == 'zh_CN' || userLanguage.code == 'en_US')"
        src="@/assets/images/activity/blackFriday/half.svg" class="title-than" alt="" />

      <img src="@/assets/images/activity/blackFriday/half_fr.png" class="title-than"
        v-if="activityShow && userLanguage.code == 'fr_FR'" alt="" />

      <img src="@/assets/images/activity/blackFriday/half_de.png" class="title-than"
        v-if="activityShow && userLanguage.code == 'de_DE'" alt="" />

      <img src="@/assets/images/activity/blackFriday/half_it.png" class="title-than"
        v-if="activityShow && userLanguage.code == 'it_IT'" alt="" />

      <img src="@/assets/images/activity/blackFriday/half_pl.png" class="title-than"
        v-if="activityShow && userLanguage.code == 'pl_PL'" alt="" />

      <img src="@/assets/images/activity/blackFriday/half_pt.png" class="title-than"
        v-if="activityShow && userLanguage.code == 'pt_PT'" alt="" />

      <img src="@/assets/images/activity/blackFriday/half_es.png" class="title-than"
        v-if="activityShow && userLanguage.code == 'es_ES'" alt="" />

      <div class="sub-sty" v-if="activityShow">{{ $t('black.sub_black_text') }}
        <span class="logo">100buy</span>
      </div>
      <div class="share" v-if="activityShow">
        <div class="share-btn" @click="activityBtn">
          {{ $t("black.event_det") }}
        </div>
      </div>
    </div>
    <!-- 内容区别 -->
    <div v-if="activityShow">
      <shop-com ref="shopComRef" :shopInfo="shopData" :isActive="isActive" @indexChange="indexChange"></shop-com>
      <div class="goods-list">
        <Row :gutter="25">
          <Col span="4" v-for="item in dataList" :key="item.id">
          <!-- 商品 -->
          <div class="card-goods" @mouseenter="handleMouseEnter(item)" @mouseleave="handleMouseLeave(item)"
            @click="openCard(item)">
            <div class="border-bg"></div>
            <div style="
                    background-color: #ffffff;
                    border-radius: 12px;
                    height: 100%;
                  ">
              <img :src="item.mainImg" class="card-goods-img" alt="" />
              <!-- 购物车ICON -->
              <img :src="item.spuLock == 0 ? item.iconUrl : item.lockunIcon" class="is-hover" @click="openCard(item)" />
              <!-- <img src="@/assets/images/activity/unselect_cart.png" class="is-hover" alt=""> -->
              <div class="card-goods-info">
                <div class="goods-name">{{ item.subject }}</div>
                <div class="price" v-if="item.spuLock == 0">
                  ¥ {{ item.cnyprice }}
                  <span v-if="userInfo.currencySymbol != '¥'">
                    ≈ {{ userInfo.currencySymbol }} {{ item.price }}</span>
                </div>
                <div class="price" v-else>¥ {{ getDisplayPrice(item.cnyprice) }}</div>
              </div>
            </div>
          </div>
          </Col>
        </Row>
        <div class="more" v-if="!noData">
          <Button v-if="dataList.length > 0" class="btn" :loading="loadingMore" @click="onLoadMore">{{
            $t("goods.viewMore")
          }}</Button>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer-sty">
        <img id="unCatId" src="@/assets/images/activity/blackFriday/un-cart.png" @click="openCart"
          v-if="cartNumList.length <= 0" class="left-cart" alt="" />
        <div class="right-payment" id="catId" v-if="cartNumList.length > 0 & dataList != ''">
          <div class="top-tips">
            <img src="@/assets/images/activity/blackFriday/left.png" class="icon" alt="" />
            <div class="yellow-rect">
              {{ userLanguage.code != "zh_CN" ? $t("black.after_time") : '' }} {{ exHours }}:{{ exMin }}:{{ exSec }}
              {{ userLanguage.code == "zh_CN" ? $t("black.after_time") : '' }}
            </div>
            <img src="@/assets/images/activity/blackFriday/right.png" class="icon" alt="" />
          </div>
          <div class="payment-sty">
            <div class="hover-sty">
              <div class="cart-area">
                <Badge :count="shopCartItemCount">
                  <img src="@/assets/images/activity/cart.png" @click="openCart" class="cart-icon" alt="" />
                </Badge>
              </div>
            </div>
            <div class="info-fee">
              <div class="amount">
                <div class="label">{{ $t("event.itemsSubtotal") }}</div>
                <div class="value">
                  ¥ {{ priceLoading ? "--" : totalAfterDiscount }}
                </div>
              </div>
              <div class="freight">
                <div class="label">{{ $t("event.ship_fee_label") }}</div>
                <div class="value">
                  ¥ {{ priceLoading ? "--" : expressFee }}
                </div>
              </div>
            </div>
            <div class="pay-btn" @click="payBtn">
              {{ $t("event.payBtn") }} {{ userInfo.currencySymbol }}
              {{ payFee || 0 }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 活动结束 -->
    <div v-else class="time-end">
      <div class="end-text">{{ $t('black.bye1_text') }}</div>
      <div class="end-text">{{ $t('black.bye2_text') }}</div>
      <div class="end-text">{{ $t('black.bye3_text') }}</div>
      <div class="end-text">{{ $t('black.bye4_text') }}</div>
      <img src="@/assets/images/activity/bye.png" class="bye-img" alt="" />
    </div>
    <!-- 特殊卡片弹框 -->
    <activity-detail-pop ref="activityRef"></activity-detail-pop>
    <!-- 详情弹框 -->
    <goods-detail-pop ref="detailRef" @addSuccess="getCartListMet"></goods-detail-pop>
    <!-- 购物车 payMet支付事件 on-change刷新购物车列表-->
    <goods-cart-pop ref="cartRef" :currentAddr="currentAddr" :effectiveList="effectiveList" :expireList="expireList"
      :itemsSubTotal="itemsSubTotal" :totalAfterDiscount="totalAfterDiscount" :expressFee="expressFee" :payFee="payFee"
      :shopCartItemCount="shopCartItemCount" :totalSavings="totalSavings" @editUpdateMet="handlerData"
      @updateMet="getCartListMet" @payMet="payBtn" @onSelectAddr="onSelectAddr"
      @showCartMet="isShowCart"></goods-cart-pop>
    <!-- 进度弹框 removeMet点击清空失效商品操作返回购物车用户自己操作 -->
    <process-order-pop ref="processRef" :invalidList="invalidList" @removeMet="openCart"></process-order-pop>
  </div>
</template>
<script>
import { mapState } from "vuex";
import GoodsDetailPop from "../../components/goods-detail-pop.vue";
import {
  activityList,
  getCartList,
  getPromotion,
  activityTime,
  shopList
} from "@/api/activity";
import GoodsCartPop from "../../components/goods-cart-pop.vue";
import ActivityDetailPop from "../../components/activity-detail-pop.vue";
import ProcessOrderPop from "../../components/process-order-pop.vue";
import { debounce } from "@/common/common";
import { addressList } from "@/api/address";
import { editorMyInfo } from "@/api/user";
import ShopCom from '../../components/shop-Com.vue';
import { cartBalanceAccounts } from "@/api/cart";
export default {
  components: {
    GoodsDetailPop,
    GoodsCartPop,
    ActivityDetailPop,
    ProcessOrderPop,
    ShopCom,
  },
  data() {
    return {
      startTime: "",
      nowDate: "",
      loadingMore: false,
      noData: false, // 是否还有更多数据
      activityShow: true, //活动开始结束
      propInfo: {},
      priceLoading: false,
      dataList: [],
      cartNumList: [],
      form: {
        pageNo: 1,
        pageSize: 30,
        channel: 'WEIDIAN'
      },
      defaultIcon: require("@/assets/images/activity/unselect_cart.png"),
      defaultLockIcon: require("@/assets/images/activity/blackFriday/un_lock.png"),
      total: 1,
      itemsSubTotal: 0,
      totalAfterDiscount: 0,
      expressFee: 0,
      payFee: 0,
      needToBuyAmount: 0,
      shopCartItemCount: 0,
      totalSavings: 0,
      effectiveList: [],
      expireList: [],
      timeForm: {
        activityName: "黑色星期五",
        channel: "TAOBAO",
      },
      hours: "00",
      min: "00",
      sec: "00",
      exHours: "00",
      exMin: "00",
      exSec: "00",
      currentAddr: {}, // 选择收货地址
      remarks: "",
      invalidList: [],
      shopData: {
        result: []
      },
      isActive: 0,
      pageNoList: []
    };
  },
  computed: {
    ...mapState({
      langList: (state) => {
        // 语言列表
        let list = [];
        if (state.config.config) {
          list = state.config.config.langList;
        }
        return list;
      },
      currencyList: (state) => {
        // 币种列表
        let list = [];
        if (state.config.config) {
          list = state.config.config.currencyList;
        }
        return list;
      },
      userLanguage: (state) => state.user.userLanguage,
      userCurrency: (state) => state.user.userCurrency,
      userInfo: (state) => state.user.userInfo,
      doubleCartNum: (state) => state.user.doubleCartNum, // 购物车数量
    })
  },
  created() {
    this.getTime();
    this.getShop();
    this.getCartListMet();
    this.getAddressList();
  },
  methods: {
    getDisplayPrice(priceStr) {
      const priceStrAsString = priceStr.toString();
      const decimalIndex = priceStrAsString.indexOf('.');
      if (decimalIndex === -1) {
        // 没有小数点，按原逻辑处理
        const firstDigit = priceStrAsString[0];
        return `${firstDigit}${'?'.repeat(priceStrAsString.length - 1)}`;
      } else {
        // 有小数点，提取整数部分并按原逻辑处理整数部分
        const integerPart = priceStrAsString.slice(0, decimalIndex);
        const firstDigitOfInteger = integerPart[0];
        return `${firstDigitOfInteger}${'?'.repeat(integerPart.length - 1)}`;
      }
    },
    handleMouseEnter(item) {
      if (item.spuLock === 0) {
        item.iconUrl = item.hoverIconUrl;
      } else {
        item.lockunIcon = item.lockunHover;
      }
    },
    handleMouseLeave(item) {
      if (item.spuLock === 0) {
        item.iconUrl = this.defaultIcon;
      } else {
        item.lockunIcon = this.defaultLockIcon;
      }
    },
    exTimeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    exCountDown(newTime, endTime) {
      clearInterval(this.exInterval);
      this.exInterval = null;
      this.exInterval = setInterval(() => {
        // 对结束时间进行处理渲染到页面
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = endTime - newTime;
          // 获取时、分、秒
          let hours = parseInt(time / (1000 * 3600));
          let remainingSeconds = time % (1000 * 3600);
          let min = parseInt(remainingSeconds / (1000 * 60));
          let sec = parseInt((remainingSeconds % (1000 * 60)) / 1000);
          obj = {
            exHours: this.exTimeFormat(hours),
            exMin: this.exTimeFormat(min),
            exSec: this.exTimeFormat(sec),
          };
          newTime += 1000;
        } else {
          // 活动已结束，全部设置为'00'
          obj = {
            exHours: "00",
            exMin: "00",
            exSec: "00",
          };
          clearInterval(this.interval);
        }
        this.exHours = obj.exHours;
        this.exMin = obj.exMin;
        this.exSec = obj.exSec;
      }, 1000);
    },
    getShop() {
      shopList().then((res) => {
        this.shopData = res;
        let num = 0;
        this.shopData.result.forEach((item, index) => {
          if (item.endTime > this.shopData.timestamp && this.shopData.timestamp > item.startTime) {
            this.isActive = index;
            this.exCountDown(this.shopData.timestamp, item.endTime)
            this.getList();
          } else {
            num++;
          }
        })
        // 店铺都锁着的情况下默认取第一个
        if (num === this.shopData.result.length) {
          this.isActive = 0;
          this.getList();
        }
        if (this.shopData.result.length) {
          setTimeout(() => {

            this.$refs.shopComRef.initSwiper();
          }, 300);
        }
      })
    },
    indexChange(index) {
      if (index !== this.isActive) {
        this.isActive = index;
        this.form.pageNo = 1;
        this.dataList = [];
        this.getList();
      }
    },
    onLoadMore() {
      this.form.pageNo = this.pageNoList[0];//将乱序的第一位当做查询的页码
      // 加载更多
      this.getList();
    },
    onUserLang(info) {
      localStorage.setItem("user_language", JSON.stringify(info));
      this.$store.commit("setUserLanguage", info);
      if (this.userInfo) {
        editorMyInfo({
          lang: info.code,
        }).then(() => {
          window.location.replace(window.location.href);
        });
      } else {
        window.location.replace(window.location.href);
      }
    },
    onUserCurrency(info) {
      localStorage.setItem("user_currency", JSON.stringify(info));
      this.$store.commit("setUserCurrency", info);
      if (this.userInfo) {
        editorMyInfo({
          currencyCode: info.code,
        }).then(() => {
          window.location.replace(window.location.href);
        });
      } else {
        window.location.replace(window.location.href);
      }
    },
    getTime() {
      activityTime(this.timeForm).then((res) => {
        this.startTime = res.result.startTime;
        this.nowDate = res.result.systemTime;
        this.countDown(res.result.systemTime, res.result.endTime);
      });
    },
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    countDown(newTime, endTime) {
      clearInterval(this.interval);
      this.interval = null;
      this.interval = setInterval(() => {
        // 对结束时间进行处理渲染到页面
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = endTime - newTime;
          // 获取时、分、秒
          let hours = parseInt(time / (1000 * 3600));
          let remainingSeconds = time % (1000 * 3600);
          let min = parseInt(remainingSeconds / (1000 * 60));
          let sec = parseInt((remainingSeconds % (1000 * 60)) / 1000);
          obj = {
            hours: this.timeFormat(hours),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec),
          };
          newTime += 1000;
        } else {
          // 活动已结束，全部设置为'00'
          obj = {
            hours: "00",
            min: "00",
            sec: "00",
          };
          clearInterval(this.interval);
          this.activityShow = false;
        }
        this.hours = obj.hours;
        this.min = obj.min;
        this.sec = obj.sec;
      }, 1000);
    },
    //数组乱序
    shuffleArray(array) {
      array.sort(() => Math.random() - 0.5);
      return array;
    },
    getList() {
      this.form.scrollId = this.shopData.result[this.isActive].shop_id;
      // if (this.noData == true) {
      //   return false;
      // }
      this.loadingMore = true;
      activityList(this.form).then((res) => {
        let data = res.result.records;
        data.forEach((item) => {
          item.iconUrl = require("@/assets/images/activity/unselect_cart.png");
          item.hoverIconUrl = require("@/assets/images/activity/select_cart.png");
          item.lockunIcon = require('@/assets/images/activity/blackFriday/un_lock.png');
          item.lockunHover = require('@/assets/images/activity/blackFriday/is_lock.png');
        });
        if (this.form.pageNo !== 1) {
          this.dataList = this.dataList.concat(data);
        } else {
          this.dataList = data;
        }
        // this.total = res.result.total;
        this.loadingMore = false;
        // 乱序页面查询，增加后面商品的曝光
        if (this.form.pageNo == 1) {
          let pageNoList = [];
          for (let i = 1; i <= res.result.pages; i++) {
            if (i != 1) {//排除第一页
              pageNoList.push(i);
            }
          }
          this.pageNoList = this.shuffleArray(pageNoList);
        } else {
          this.pageNoList.splice(0, 1);//删除掉已使用的页码
        }
        this.noData = this.pageNoList.length == 0 ? true : false;//是否显示加载更多
      });
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getList();
    },
    onPage(index) {
      this.form.pageNo = index;
      this.getList();
    },
    // 列表数据
    getCartListMet() {
      this.priceLoading = true;
      getCartList({ source: 3 }).then((res) => {
        this.handlerData(res);
      });
    },
    handlerData(res) {
      this.priceLoading = false;
      this.itemsSubTotal = res.result.itemsSubTotal; //优惠前的价格
      this.totalAfterDiscount = res.result.totalAfterDiscount; //优惠后价格
      this.expressFee = res.result.expressFee; //运费
      this.payFee = res.result.payFee; //支付金额
      this.shopCartItemCount = res.result.shopCartItemCount; //购物车数量
      this.totalSavings = res.result.totalSavings; //优惠金额
      this.needToBuyAmount = res.result.needToBuyAmount; //还需购买多少
      this.propInfo = res.result;
      this.cartNumList = res.result.shopList;
      let shopList = []; //有效商品
      let expiredList = []; //失效商品
      if (this.propInfo.shopList) {
        this.propInfo.shopList.forEach((item) => {
          item.itemList.forEach((i) => {
            if (i.isExpire == 1) {
              i["active"] = false;
              expiredList.push(i);
            } else {
              i["active"] = i.isSelected == 1;
              shopList.push(i);
            }
          });
        });
      }
      this.effectiveList = shopList;
      this.expireList = expiredList;
    },
    openCard(item) {
      this.$refs.detailRef.getDetail(item);
    },
    isShowCart(val) {
      if (val == true) {
        const unIdHide = document.getElementById("unCatId");
        if (unIdHide) {
          unIdHide.style.display = "none";
        }
        const elementToHide = document.getElementById("catId");
        if (elementToHide) {
          elementToHide.style.display = "none";
        }
      } else {
        const unIdHide = document.getElementById("unCatId");
        if (unIdHide) {
          unIdHide.style.display = "block";
        }
        const elementToHide = document.getElementById("catId");
        if (elementToHide) {
          elementToHide.style.display = "block";
        }
      }
    },
    // 购物车
    openCart() {
      this.isShowCart(true); // 点击后不显示购物车
      this.$refs.cartRef.open();
    },
    // 特殊卡片弹框
    activityBtn() {
      this.$refs.activityRef.open();
    },
    linkBtn() {
      this.$router.push("/");
    },
    // 获取地址信息列表
    getAddressList() {
      // 获取地址列表
      addressList().then((res) => {
        let arr = res.result.filter((item) => {
          return item.isDefault == true;
        });
        // isDefault 有默认地址
        if (arr.length > 0) {
          this.currentAddr = arr[0];
        } else {
          // 没默认地址的情况下取接口返回的第一条
          if (res.result.length > 0) {
            this.currentAddr = res.result[0];
          }
        }
      });
    },
    onSelectAddr(val) {
      this.currentAddr.id = val.id;
      this.currentAddr = val;
    },
    // 支付
    payBtn: debounce(function () {
      let newDataList = [];
      this.effectiveList.forEach((item) => {
        if (item.isSelected == 1) {
          newDataList.push(item.id);
        }
      });

      if (newDataList.length === 0) {
        this.$Message.error(this.$t('user.pleaseSelectProduct'));
        return false
      }
      this.$refs.processRef.open();//显示进度弹框
      cartBalanceAccounts(newDataList).then(res => {
        this.$refs.processRef.close();
        setTimeout(() => {
          this.$router.push(`/confirm/order?id=${res.result}`);
        }, 200)
      })

      // getPromotion({
      //   addressId: this.currentAddr.id, // 国家
      //   cartItems: newDataList,
      //   remarks: this.remarks,
      // }).then((res) => {
      //   if (res.result.orderNo) {
      //     this.$refs.processRef.close();
      //     this.$router.push(`/pay?id=${res.result.orderNo}`);
      //   } else {
      //     this.invalidList = res.result.unBuyList;
      //   }
      // });
    })
  },
};
</script>

<style lang="less" scoped>
.ac-page-wrapper {
  width: 100%;
  height: 100%;
  padding-bottom: 109px;
  background: #050505;

  .head-banner {
    height: 100%;
    padding: 40px 0;
    text-align: center;
    position: relative;

    .bg-img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .banner-img {
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
    }

    .head-time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 80px;

      .logo-sty {
        width: 144px;
        height: 34px;
        cursor: pointer;
        // display: block;
        visibility: hidden;
        position: relative;
      }

      .right-rect {
        display: flex;
        gap: 24px;

        .other-column {
          margin-top: 32px;

          .language {
            border-radius: 22px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 19px;
            color: #ffffff;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;

            .icon {
              display: block;
              width: 24px;
            }

            .type {
              margin-left: 8px;
              // font-size: 14px;
              // font-weight: 600;
            }
          }

          :deep(.ivu-select-dropdown) {
            padding: 0;
          }

          .lang-dropdown-menu {
            padding: 30px 19px;
            width: 241px;
            height: 100%;
            background: #ffffff;
            box-shadow: 0px 0px 14px 0px rgba(34, 38, 43, 0.15);
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #ebeef5;

            .select-list-wrap {
              position: relative;

              &:first-child {
                &:after {
                  background: rgba(0, 0, 0, 0);
                }
              }

              .title {
                display: block;
                padding: 0 16px;
                margin-bottom: 10px;
                font-size: 12px;
                font-weight: 600;
              }

              .select-list {
                min-width: 100px;
                max-height: 360px;
                overflow: auto;
                overflow-y: overlay;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                &::-webkit-scrollbar {
                  width: 2px;
                  height: 1px;
                }

                &-item {
                  width: 98px;
                  height: 32px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  border: 1px solid #dcdfe6;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  font-size: 12px;
                  font-weight: 600;
                  margin-bottom: 8px;

                  &:hover {
                    color: @primary-color;
                    border-color: @primary-color;

                    .icon {
                      color: @primary-color;
                    }
                  }

                  .img {
                    display: block;
                    width: 16px;
                    margin-right: 4px;
                  }
                }

                .select-active {
                  color: @primary-color;
                }
              }
            }
          }
        }

        .time-sty {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: start;

          .time-label {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
            line-height: 24px;
            margin-bottom: 8px;
          }

          .time-text {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 20px;
            color: #ffffff;
            line-height: 24px;

            span {
              padding: 6px;
              background: rgba(20, 20, 20, 0.38);
              border-radius: 2px 2px 2px 2px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }

    .title-sty {
      width: 65%;
      margin-top: 120px;
      position: relative;
    }

    .title-text {
      min-width: 700px;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 37px;
      margin: 0 auto;
      margin-top: 13px;
      position: relative;
    }

    .title-than {
      position: relative;
      width: 50%;
    }

    .sub-sty {
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 37px;
      display: flex;
      justify-content: center;
      gap: 11px;
      margin-top: 24px;

      .logo {
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 37px;
      }
    }

    .share {
      display: flex;
      justify-content: center;

      .share-btn {
        min-width: 300px;
        background-image: url('@/assets/images/activity/blackFriday/eve_btn.png');
        background-size: 100% 100%;
        padding: 12px 24px;
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 37px;
        cursor: pointer;
        margin-top: 24px;
        position: relative;
      }
    }
  }

  .goods-list {
    min-height: 900px;
    margin: 0 200px;
    margin-top: 80px;

    .card-goods {
      width: 232px;
      height: 320px;
      background: #ffffff;
      border-radius: 12px 12px 12px 12px;
      padding: 6px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .border-bg {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        margin: -4px;
        border-radius: inherit;
        background: #01ECFF;
        /*important*/
        // background: linear-gradient(342deg,
        //     rgba(1, 237, 252, 1),
        //     rgba(230, 110, 230, 1));
      }

      &-img {
        width: 100%;
        height: 220px;
        background: darkcyan;
        border-radius: 8px 8px 0px 0px;
        object-fit: cover;
      }

      .un-hover {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 178px;
        right: 12px;
        cursor: pointer;
      }

      .is-hover {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 178px;
        right: 12px;
        cursor: pointer;
      }

      &-info {
        margin: 0 9px;

        .goods-name {
          font-family: Open Sans, Open Sans;
          font-weight: 400;
          font-size: 15px;
          color: #1e1714;
          line-height: 18px;
          margin-top: 8px;
          width: 183px;
          white-space: pre-line;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .price {
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 17px;
          color: #ff186b;
          line-height: 20px;
          margin-top: 8px;

          span {
            color: #aeb0b9;
          }
        }
      }
    }

    .card-goods:hover {
      transform: translateY(-10px);
      transition: 0.5s;
      padding: 2px;
    }

    .card-bg {
      width: 232px;
      border-radius: 15px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .card-bg1 {
      width: 232px;
      height: 320px;
      background: #01ecff;
      border-radius: 15px;
      padding: 53px 18px 18px 18px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .rig-img {
        width: 66px;
        height: 66px;
        position: absolute;
        bottom: 18px;
        right: 18px;
      }

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 800;
        font-size: 22px;
        color: #1c1548;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .content {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 15px;
        color: #1c1548;
        line-height: 20px;
      }
    }

    .card-bg1:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    .card-bg2 {
      width: 232px;
      height: 320px;
      background: #33ffcf;
      border-radius: 15px;
      padding: 53px 18px 18px 18px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .rig-img {
        width: 66px;
        height: 66px;
        position: absolute;
        bottom: 18px;
        right: 18px;
      }

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 800;
        font-size: 22px;
        color: #1c1548;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .content {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 15px;
        color: #1c1548;
        line-height: 20px;
      }
    }

    .card-bg2:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    .card-bg3 {
      width: 232px;
      height: 320px;
      background: #ff87bd;
      border-radius: 15px;
      padding: 53px 18px 18px 18px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .rig-img {
        width: 66px;
        height: 66px;
        position: absolute;
        bottom: 18px;
        right: 18px;
      }

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 800;
        font-size: 22px;
        color: #1c1548;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .content {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 15px;
        color: #1c1548;
        line-height: 20px;
      }
    }

    .card-bg3:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    .card-bg4 {
      width: 232px;
      height: 320px;
      background: #ffe551;
      border-radius: 15px;
      padding: 53px 18px 18px 18px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .rig-img {
        width: 66px;
        height: 66px;
        position: absolute;
        bottom: 18px;
        right: 18px;
      }

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 800;
        font-size: 22px;
        color: #1c1548;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .content {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 15px;
        color: #1c1548;
        line-height: 20px;
      }
    }

    .card-bg4:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    .card-bg5 {
      width: 232px;
      height: 320px;
      background: #01b7ff;
      border-radius: 15px;
      padding: 53px 18px 18px 18px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .rig-img {
        width: 66px;
        height: 66px;
        position: absolute;
        bottom: 18px;
        right: 18px;
      }

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 800;
        font-size: 22px;
        color: #1c1548;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .content {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 15px;
        color: #1c1548;
        line-height: 20px;
      }
    }

    .card-bg5:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    .card-bg6 {
      width: 232px;
      height: 320px;
      background: #ffae51;
      border-radius: 15px;
      padding: 53px 18px 18px 18px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .rig-img {
        width: 66px;
        height: 66px;
        position: absolute;
        bottom: 18px;
        right: 18px;
      }

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 800;
        font-size: 22px;
        color: #1c1548;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .content {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 15px;
        color: #1c1548;
        line-height: 20px;
      }
    }

    .card-bg6:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    .card-bg7 {
      width: 232px;
      height: 320px;
      background: #ff596f;
      border-radius: 15px;
      padding: 53px 18px 18px 18px;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .rig-img {
        width: 66px;
        height: 66px;
        position: absolute;
        bottom: 18px;
        right: 18px;
      }

      .title-text {
        font-family: Open Sans, Open Sans;
        font-weight: 800;
        font-size: 22px;
        color: #1c1548;
        line-height: 26px;
        margin-bottom: 20px;
      }

      .content {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 15px;
        color: #1c1548;
        line-height: 20px;
      }
    }

    .card-bg7:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: end;
      width: 100%;
      margin-top: 32px;
      margin-bottom: 32px;

      .btn {
        width: 30%;
      }
    }
  }

  .footer-sty {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    position: sticky;
    bottom: 42px;
    z-index: 99;

    .left-cart {
      width: 236px;
      cursor: pointer;
    }

    .right-payment {
      min-width: 740px;

      .top-tips {
        min-width: 374px;
        display: flex;
        justify-content: center;

        .icon {
          width: 36px;
          height: 40px;
        }

        .yellow-rect {
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 16px;
          color: #1c1548;
          line-height: 19px;
          padding: 9px 13px;
          background: #01ECFF;
        }
      }

      .payment-sty {
        padding: 16px 28px 16px 17px;
        background: #ffffff;
        border-radius: 18px 18px 18px 18px;
        display: flex;
        align-items: center;
        gap: 47px;
        position: relative;

        &::before {
          /* 1 */
          display: block;
          content: "";
          border-radius: 18px;
          border: 8px solid transparent;
          background: linear-gradient(132deg,
              #E82C58, #53FFDE,
              #A638FF) border-box;
          /* 2 */
          -webkit-mask: linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
          /* 3 */
          -webkit-mask-composite: xor;
          /* 4 */
          mask-composite: exclude;
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .hover-sty {
          width: 138px;
          height: 77px;
          border-right: 1px solid #e9eaf3;
          border-radius: 6px 6px 6px 6px;
          display: flex;
          justify-content: center;
          align-items: center;

          .cart-area {
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .cart-icon {
              width: 45px;
              height: 45px;
              z-index: 2;
              cursor: pointer;
            }
          }
        }

        .hover-sty:hover {
          background: #e0fffc;
        }

        .info-fee {
          margin-right: 10px;

          .amount {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 44px;

            .label {
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 16px;
              color: #1c1548;
              line-height: 19px;
            }

            .value {
              font-family: Open Sans, Open Sans;
              font-weight: bold;
              font-size: 20px;
              color: #ff186b;
              line-height: 23px;
            }
          }

          .freight {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 44px;
            margin-top: 8px;

            .label {
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 16px;
              color: #1c1548;
              line-height: 19px;
            }

            .value {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 16px;
              color: #1c1548;
              line-height: 19px;
            }
          }
        }

        .pay-btn {
          min-width: 170px;
          padding: 13px 22px;
          background: #1e1714;
          border-radius: 15px 15px 15px 15px;
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 20px;
          color: #ffffff;
          line-height: 23px;
          text-align: center;
          z-index: 2;
          cursor: pointer;
        }
      }
    }
  }

  .time-end {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 9;

    .end-text {
      width: 65%;
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 34px;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
    }

    .bye-img {
      width: 128px;
      margin-top: 36px;
    }
  }
}
</style>
